app.controller('DashboradGraphCtrl', ['$rootScope', '$scope', 'httpLoad',function($rootScope, $scope, httpLoad) {
	$rootScope.moduleTitle = '数据纵览 > Dashboard';
	$rootScope.link = '/statics/css/graph.css';
	$scope.options = {
		vHost:{
			theme:'宿主机概览',
			colorMap:{
				'开机':'#00D7AF',
				'关机':'#5296EB',
				'异常':'#FF837E',
				'断开':'#CCCCCC'
			},
			dataMap:{
				ONLINE:'开机',
				OFFLINE:'关机',
				ERROR:'异常',
				UNKNOWN:'断开'
			}
		},
		vVm:{
			theme:'虚拟机概览',
			colorMap:{
				'开机':'#7BE299',
				'关机':'#00C3F2',
				'异常':'#FFB07D',
				'断开':'#CCCCCC',
				'挂起':'#FFFF99'
			},
			dataMap:{
				ONLINE:'开机',
				OFFLINE:'关机',
				ERROR:'异常',
				SUSPEND:'挂起',
				UNKNOWN:'断开'
			}
		},
		oHost:{
			showTitle:true,
			theme:'宿主机',
			radius : ['40%','60%'],
			colorMap:{
				'开机':'#25E2BE',
				'关机':'#FF6C8C',
				'异常':'#5296EB',
				'断开':'#CCCCCC'
			},
			legend:true,
			dataMap:{
				ONLINE:'开机',
				OFFLINE:'关机',
				ERROR:'异常',
				UNKNOWN:'断开'
			}
		},
		oVm:{
			showTitle:true,
			theme:'虚拟机',
			radius : ['40%','60%'],
			colorMap:{
				'开机':'#62B1D8',
				'关机':'#FFB375',
				'异常':'#A66DE3',
				'断开':'#CCCCCC',
				'挂起':'#FFFF99'
			},
			legend:true,
			dataMap:{
				ONLINE:'开机',
				OFFLINE:'关机',
				ERROR:'异常',
				SUSPEND:'挂起',
				UNKNOWN:'断开'
			}
		},
		app:{
			showTitle:false,
			radius : ['70%','84%'],
			theme:'应用',
			label: {
				normal: {
					show: false,
					position: 'center'
				}
			},
			colorMap:{
				'开机':'#46B7EC',
				'关机':'#00D7AF',
				'异常':'#FDE669'
			},
			legend:false
		},
		alarm:{
			showTitle:false,
			radius : ['40%','55%'],
			theme:'告警',
			colorMap:{
				'警告':'#46B7EC',
				'严重':'#FF7A82'
			},
			dataMap:{
				DANGER:'严重',
				WARN:'警告',
			},
			legend:false
		}
	}
	httpLoad.loadData({
			url: '/stats/dashboard',
			method: 'GET',
		  noParam:true,
			success: function(data){
				if(data.success) {
					$scope.isDataLoad = true;
					$scope.dashboradData = data.data;
				}
			}
		});
}]);
app.directive('ngDashboradBarStackChart', [ function () {
	return {
		restrict: 'EA',
		scope:{
			data:'=',
			options:'='
		},
		link: function (scope, element, attrs) {
			var chart = echarts.init($(element)[0]);
			var initEchart = function (xAxis,legend,series) {
				var option = {
					backgroundColor:'#fff',
					title:{
						text:scope.options.theme,
						textStyle:{
								fontWeight: 'bold',
								fontSize: 16,
								color:'#333'
							}
					},
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:legend,
						orient : 'horizontal',
						left:'center',
						top:'10%',
					},
					toolbox: {
						show : true,
						feature : {
							mark : {show: true},
							magicType : {show: true, type: ['line', 'stack', 'tiled','bar']},
							saveAsImage : {show: true}
						}
					},
					calculable : true,
					xAxis : [
						{
							type : 'category',
							boundaryGap : true,
							data : xAxis
						}
					],
					yAxis : [
						{
							type : 'value'
						}
					],
					grid: {
						left: '3%',
						right: '2%',
						bottom: '3%',
						containLabel: true
					},
					series : series
				};
				chart.setOption(option);
			};
			var legendData = [],series = [];
			//数据处理
			(function () {
				scope.data.values.forEach(function (item) {
					item.name = scope.options.dataMap[item.name];
					legendData.push(item.name);
					series.push({
						name:item.name,
						type:'bar',
						stack: 'all',
						barMaxWidth: 30,
						barGap:'100%',
						smooth:true,
						itemStyle: {
							normal: {
								areaStyle: {type: 'default'},
								color:scope.options.colorMap[item.name],
								opacity:0.98
							}},
						data:item.data
					});
				});
				initEchart(scope.data.keys,legendData,series);
			})();
		}}
}]);
app.directive('ngDashboradPieLoopChart', [function () {
	return {
		restrict: 'EA',
		scope:{
			data:'=',
			options:'='
		},
		link: function (scope, element, attrs) {
			var chart = echarts.init($(element)[0]);
			var initEchart = function (legend,series) {
				var option = {
					backgroundColor:'#fff',
					title:{
						show:scope.options.showTitle,
						text:scope.options.theme,
						textStyle:{
							fontWeight: 'bold',
							fontSize: 16,
							color:'#333'
						}
					},
					tooltip : {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						show:scope.options.legend,
						orient : 'horizontal',
						bottom:20,
						data:legend
					},
					toolbox: {
						show : true,
						feature : {
							// saveAsImage : {show: true}
						}
					},
					calculable : true,
					series : [
						{
							name:scope.options.theme,
							type:'pie',
							label:scope.options.label||{},
							radius : scope.options.radius,
							center: ['50%', '50%'],
							data:series
						}
					]
				};
				chart.setOption(option);
			};
			var legendData = [];
			(function(){
				scope.data.forEach(function (item) {
					item.name = scope.options.dataMap[item.name];
					legendData.push(item.name);
					item.itemStyle = {
						normal:{
							color:scope.options.colorMap[item.name],
							opacity:0.98
						}
					}
				});
				initEchart(legendData,scope.data);
			})();
		}
	}
}]);